#![allow(non_snake_case)]
use crate::app_layout::{Layout, SideBar};
use crate::types::Rbac;
use dioxus::prelude::*;

use super::workflow_cards::{get_workflow_icon, Workflow};

pub fn view(team_id: i32, rbac: Rbac, workflow: Option<Workflow>) -> String {
    let page = rsx! {
        Layout {
            section_class: "p-4 max-w-3xl w-full mx-auto",
            selected_item: SideBar::Workflows,
            team_id: team_id,
            rbac: rbac,
            title: "Workflow Details",
            header: rsx!(
                h3 { "Workflow Details" }
            ),

            if let Some(workflow) = workflow {
                div {
                    // Header section with icon, name, and status
                    div {
                        class: "flex items-start gap-4 mb-6",
                        img {
                            class: "border rounded p-2 shrink-0",
                            src: get_workflow_icon(&workflow.name),
                            width: "48",
                            height: "48",
                            alt: "Workflow icon"
                        }
                        div {
                            class: "flex-1 min-w-0",
                            div {
                                class: "flex items-center gap-3 mb-2",
                                h2 {
                                    class: "text-2xl font-semibold",
                                    "{workflow.name}"
                                }
                                span {
                                    class: workflow.status.badge_class(),
                                    "{workflow.status.display_text()}"
                                }
                            }
                            p {
                                class: "text-gray-600 mb-4",
                                "{workflow.description}"
                            }
                        }
                    }

                    hr {
                        class: "mb-6"
                    }

                    // Instructions Section
                    div {
                        class: "mb-8",
                        h3 {
                            class: "text-lg font-semibold mb-4",
                            "Instructions"
                        }
                        textarea {
                            class: "w-full h-32 p-4 border border-gray-300 rounded-lg resize-none bg-gray-50",
                            readonly: true,
                            "Connect to linked in and get anyone who has set their job to an AI related field in the last few days"
                        }
                    }

                    // Actions Section
                    div {
                        class: "mb-8",
                        h3 {
                            class: "text-lg font-semibold mb-4",
                            "Actions"
                        }

                        // LinkedIn Action
                        details {
                            class: "card mt-5",
                            summary {
                                class: "cursor-pointer px-4 py-3 flex items-center justify-between",
                                div {
                                    class: "flex",
                                    div {
                                        class: "",
                                        img {
                                            class: "border rounded p-1",
                                            src: "",
                                            width: "24",
                                            height: "24"
                                        }
                                    }
                                    div {
                                        class: "ml-4",
                                        h2 {
                                            class: "font-semibold",
                                            "LinkedIn Search"
                                        }
                                        p {
                                            "Search LinkedIn based on the query provided"
                                        }
                                    }
                                }
                            }
                            "Searches LinkedIn for professionals who have recently updated their job titles to AI-related positions"
                        }

                        // Gmail Action
                        details {
                            class: "card mt-5",
                            summary {
                                class: "cursor-pointer px-4 py-3 flex items-center justify-between",
                                div {
                                    class: "flex",
                                    div {
                                        class: "",
                                        img {
                                            class: "border rounded p-1",
                                            src: "",
                                            width: "24",
                                            height: "24"
                                        }
                                    }
                                    div {
                                        class: "ml-4",
                                        h2 {
                                            class: "font-semibold",
                                            "Gmail Send Email"
                                        }
                                        p {
                                            "Create and send an email with the gmail API"
                                        }
                                    }
                                }
                            }
                            "Composes and sends personalized emails to the LinkedIn prospects found in the previous step"
                        }
                    }

                    // Workflow Details Section
                    div {
                        class: "mb-8",
                        h3 {
                            class: "text-lg font-semibold mb-4",
                            "Workflow Details"
                        }
                        div {
                            class: "grid grid-cols-1 md:grid-cols-2 gap-4",
                            div {
                                class: "bg-gray-50 p-4 rounded-lg",
                                h4 {
                                    class: "font-medium text-gray-700 mb-2",
                                    "Trigger Type"
                                }
                                p {
                                    class: "text-gray-900",
                                    "{workflow.trigger_type}"
                                }
                            }
                            div {
                                class: "bg-gray-50 p-4 rounded-lg",
                                h4 {
                                    class: "font-medium text-gray-700 mb-2",
                                    "Category"
                                }
                                p {
                                    class: "text-gray-900",
                                    "{workflow.category}"
                                }
                            }
                        }
                    }

                    // Back to workflows link
                    div {
                        class: "mt-8 pt-6 border-t",
                        a {
                            href: crate::routes::workflows::Index { team_id }.to_string(),
                            class: "inline-flex items-center text-blue-600 hover:text-blue-800 font-medium",
                            "← Back to Workflows"
                        }
                    }
                }
            } else {
                // Workflow not found
                div {
                    class: "text-center py-12",
                    h2 {
                        class: "text-xl font-semibold text-gray-900 mb-2",
                        "Workflow Not Found"
                    }
                    p {
                        class: "text-gray-600 mb-6",
                        "The requested workflow could not be found."
                    }
                    a {
                        href: crate::routes::workflows::Index { team_id }.to_string(),
                        class: "inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 font-medium",
                        "← Back to Workflows"
                    }
                }
            }
        }
    };

    crate::render(page)
}
